<template>
	<div>
		<jk-dialog
			v-model="showDialog"
			title="计划下达"
			width="600px"
			:show-content-loading="showLoading"
			:custom-btn-loading="confirmBtnLoading"
			:confirm-btn-loading="saveBtnLoading"
			append-to-body
			:show-confirm-btn="false"
			:show-cancel-btn="false"
			:show-close-btn="false"
			@on-visible-change="onVisibleChange"
			@on-close="onVisibleChange"
			@on-confirm="onConfirmBtn"
		>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" :show-message="false">
				<div class="margin-bottom-4 flex-between-center">
					<el-tag type="primary" effect="plain">
						<span class="el-icon-tickets item-gap"></span>
						<span>订单信息</span>
					</el-tag>
					<div class="flex-end-center">
					</div>
				</div>
				<jk-card>
					<el-row>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="订单">
								<span class="read-only-2">{{ ruleForm.code }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="客户">
								<span class="read-only-2">{{ ruleForm.customerName || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="品种">
								<span class="read-only-2">{{ ruleForm.productName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-10" label="支数">
								<span class="read-only-2">{{ ruleForm.yarnCount }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-0" label="数量">
								<span class="read-only-2">{{ ruleForm.orderQty }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item class="margin-bottom-0" label="交期">
								<span class="read-only-2">{{ `${ruleForm.deliveryDateTo}` }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</jk-card>
				<!--<el-tag type="primary" effect="plain" class="margin-top-20 margin-bottom-4">
                    <i class="el-icon-guide item-gap"></i>
                    <span>分配批号</span>
                </el-tag>
                <jk-card>
                    <el-row class="flex-start-center-wrap">
                        <el-col :span="24">
                            <el-form-item class="margin-bottom-0" label="批号" prop="orderBatchId">
                                <jk-select v-model="ruleForm.orderBatchId" :option-list="ruleForm.productOrderBatchList" size="medium" label-key-name="batchCode" class="width-100-percent" placeholder="批号"></jk-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </jk-card>-->
				<div class="flex-center margin-top-20">
					<el-button style="width: 140px;" size="large" type="primary" icon="el-icon-circle-plus" @click="onConfirmBtn(0)">前纺计划</el-button>
					<el-button style="width: 140px;" size="large" type="success" icon="el-icon-circle-plus" @click="onConfirmBtn(1)">细纱通知单</el-button>
				</div>
			</el-form>
		</jk-dialog>
		<createFrontPlanDialog
			:data-id="null"
			:order-id="ruleForm.id"
			:dialog-state="createFrontPlanDialogState"
			@on-visible-change="onVisibleChangeOfCreateFrontPlanDialog"
			@on-finish="onFinishOfCreateFrontPlanDialog"
		></createFrontPlanDialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionPrdOrderGet
    } from '../../../../api/production/order';
    import createFrontPlanDialog from './create-front-plan-dialog';
    export default {
        components: {
            createFrontPlanDialog
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [Number, String],
                default: null
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                createFrontPlanDialogState: false,
                tableLoading: false,
                workshopList: [],
                showDialog: false,
                showLoading: true,
                confirmBtnLoading: false,
                saveBtnLoading: false,
                ruleForm: {},
                rules: {
                    orderBatchId: [{ required: true, trigger: 'change' }]
                },
                batchList: [],
                tableData: []
            };
        },
        methods: {
            onVisibleChangeOfCreateFrontPlanDialog(e) {
                this.createFrontPlanDialogState = e;
            },
            onFinishOfCreateFrontPlanDialog() {
                this.createFrontPlanDialogState = false;
            },
            onConfirmBtn(type) {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        if (type === 0) {
                            // 不能使用on-visible-change,会触发创建前纺计划的弹窗
                            this.$emit('on-visible', false);
                            this.createFrontPlanDialogState = true;
                        } else {
                            this.$emit('on-finish', this.ruleForm.orderBatchId);
                        }
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                return productionPrdOrderGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = this.transferData(res.data.res);
                        this.$set(this.ruleForm, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                // if (this.dataId) await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    const cpData = JSON.parse(JSON.stringify(this.dataItem));
                    cpData.orderBatchId = cpData.productOrderBatchList && cpData.productOrderBatchList.length ? cpData.productOrderBatchList[0].id : null;
                    this.ruleForm = cpData;
                    this.getDependentData();
                }
            }
        }
    };
</script>
